<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>加人历史记录管理</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../assets/style/admin.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../assets/layui/layui.js"></script>
    <script src="../assets/js/common.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            加好友历史记录
                        </div>
                        <div class="layui-card-body">
                            <form class="layui-form" action="">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" name="search" id="search" lay-verify="title"
                                               placeholder="对方微信号" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" name="date" class="layui-input" id="LAY-history-date"
                                               lay-verify="date" placeholder="yyyy-mm-dd" autocomplete="off" lay-key="1"
                                               value="2019-11-18" onchange="reloadList()">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select id="plan_id" style="layui-input-inline" onchange="reloadList()">
                                            <option value="0">选择加人计划</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select id="add_friend_status" style="layui-input-inline"
                                                onchange="reloadList()">
                                            <option value="-1">请求成功</option>
                                            <option value="1">已通过</option>
                                            <option value="0">等待通过</option>
                                            <option value="2">已是好友</option>
                                            <option value="3">正在加人</option>
                                            <option value="4">加人失败</option>
                                            <option value="5">等待上传</option>
                                            <option value="6">等待加人</option>
                                            <option value="7">非微信号</option>
                                            <option value="8">查找失败</option>
                                        </select>
                                    </div>
                                </div>
                                <button class="layui-btn layui-btn-xs" onclick="reloadList();">搜索</button>
                                <button class="layui-btn layui-btn-xs layui-btn-primary" onclick="reloadList(true);">
                                    重置
                                </button>
                            </form>
                            <table id="LAY-history-manage" lay-filter="LAY-history-manage"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var reloadList;
        layui.use(['element', 'table', 'form', 'laydate'], function () {
            var $ = layui.$
                , table = layui.table
                , laydate = layui.laydate
                , form = layui.form
                , element = layui.element;

            element.init();

            var addFriendStatus = $('#add_friend_status').find("option:selected").val();
            var date = $('#LAY-history-date').val();
            table.render({
                elem: '#LAY-history-manage'
//            ,height: 315
                , where: {//设定异步数据接口的额外参数
                    status: addFriendStatus,
                    date: date
                }
                , url: '/add_friend_history/list_data' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
//                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    {field: 'created', title: '创建时间', width: 170}
                    , {field: 'wechat_name', title: '微信', width: 150}
                    , {field: 'wxid', title: '微信ID', width: 200}
                    , {field: 'search', title: '对方微信号', width: 160}
                    , {field: 'msg', title: '提示消息', templet: '#msgTpl'}
                    , {field: 'status', title: '状态', width: 100, templet: '#statusTpl', unresize: true}
                    , {field: 'request_date', title: '申请时间', width: 170}
                    , {
                        field: 'add_friend_status',
                        title: '是否通过',
                        width: 210,
                        templet: '#addFriendStatusTpl',
                        unresize: true
                    }
                    , {field: 'request_content', title: '验证消息', width: 200}
                ]]
                , title: '历史列表'
//            ,toolbar: '#toolbarDemo'
//            ,defaultToolbar: ['filter']
            });

            laydate.render({
                elem: '#LAY-history-date'
            });

            //监听工具条
            table.on('tool(LAY-history-manage)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if (layEvent === 'detail') { //查看
                    //do somehing
                } else if (layEvent === 'del') { //删除

                } else if (layEvent === 'edit') { //编辑
                    //do something
                }
            });

            reloadList = function (reset) {
                if (reset == true) {
                    $('#add_friend_status').find('option:first').attr("selected", false);
                    $('#add_friend_status').find('option:first').attr("selected", true);
                    $('#search').val('');
                    $('#LAY-history-date').val('');
                    $('#plan_id').find('option:first').attr("selected", false);
                    $('#plan_id').find('option:first').attr("selected", true);
                }
                var addFriendStatus = $('#add_friend_status').find("option:selected").val();
                var search = $('#search').val();
                var date = $('#LAY-history-date').val();
                var planId = $('#plan_id').find("option:selected").val();
                table.reload('LAY-history-manage', {
                    where: { //设定异步数据接口的额外参数，任意设
                        status: addFriendStatus,
                        search: search,
                        date: date,
                        plan_id: planId
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            };
        });

    </script>
    <script type="text/html" id="msgTpl">
        {{# if(d.add_friend_task_id > 0){ }}
        {{# if (d.add_friend_task_msg){ }}
        {{ d.add_friend_task_msg }}
        {{# } }}
        {{# } else { }}
        {{# if (d.msg){ }}
        {{ d.msg }}
        {{# } }}
        {{# } }}
    </script>
    <script type="text/html" id="statusTpl">
        {{# if(d.status == 0){ }}
        <span style="color: grey;">等待执行</span>
        {{# } else if(d.status == 1){ }}
        <span style="color: orange;">等待执行</span>
        {{# } else if(d.status == 2){ }}
        {{# if(d.is_mobile == 1){ }}
        <span style="color: blue;">正在上传</span>
        <!--        <span style="color: black;">非微信号</span>-->
        {{# } else{ }}
        <span style="color: blue;">正在执行</span>
        {{# } }}
        {{# } else if(d.status == 3){ }}
        <!--    <span style="color: green;">成功</span>-->
        {{# if(d.add_friend_task_id > 0){ }}
        {{# if(d.add_friend_task_status == 1){ }}
        <span style="color: orange;">等待执行</span>
        {{# } else if(d.add_friend_task_status == 2){ }}
        <span style="color: blue;">正在加人</span>
        {{# } else if(d.add_friend_task_status == 3){ }}
        {{# if(d.is_mobile == 1){ }}
        <span style="color: green;">上传成功</span>
        {{# } else{ }}
        <span style="color: green;">申请成功</span>
        {{# } }}
        {{# } else if(d.add_friend_task_status == 4){ }}
        <span style="color: red;">失败</span>
        {{# } }}
        {{# } else{ }}
        <span style="color: blue;">等待加人</span>
        {{# } }}
        {{# } else if(d.status == 4){ }}
        <span style="color: red;">失败</span>
        {{# } else if(d.status == 5){ }}
        <span style="color: black;">非微信号</span>
        {{# } }}
    </script>
    <script type="text/html" id="addFriendStatusTpl">
        {{# if(d.status == 3){ }}
        {{# if(d.add_friend_task_status == 3){ }}
        {{# if(d.add_friend_status == 0){ }}
        <span style="color: blue;">等待通过</span>
        {{# } else if(d.add_friend_status == 1){ }}
        <span style="color: green;">已通过</span>
        {{# if(d.add_friend_success_date){ }}
        {{ d.add_friend_success_date }}
        {{# } }}
        {{# } else if(d.add_friend_status == 2){ }}
        <span style="color: green;">已是好友</span>
        {{# } }}
        {{# } }}
        {{# } }}
    </script>
</div>
</body>
</html>
